<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>notebook记事本</title>
</head>
<body>
    <div id="notebook">
        <input type="text" v-model="text" @keyup.enter="add">
        <section>
            <ul>
                <li v-for="(item,index) in list" >
                    <span>{{index + 1}}.</span>
                    <label>{{item}}</label>
                    <input class="rBtn" type="button" value="X" @click="remove(index)">
                </li>
            </ul>
        </section>
        <p v-text="list.length + 'items left'" v-if="list.length != 0"></p>
        <input type="button" value="clear" @click="clear" v-show="list.length != 0">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#notebook",
            data:{
                list:["吃饭","睡觉","打豆豆"],
                text:"",
                isShow:false
            },
            methods:{
                add:function () {
                    this.list.push(this.text)
                },
                remove:function (index) {
                    this.list.splice(index,1);
                },
                clear:function () {
                    this.list.splice(0,this.list.length)
                }
            }
        })
    </script>
</body>
</html>